<template>
  <div>
    <el-dialog title="SKU列表" width="1600px" :visible.sync="dialogFormVisible">
      <el-table style="margin-top：10px" :data="tableData" border>
        <el-table-column align="center" label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column align="center" prop="" label="图片" width="180">
          <template slot-scope="scope">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:9528/lejuAdmin/material/uploadFileOss"
              :show-file-list="false"
              :headers="headers"
              :on-success="handleAvatarSuccess"
              @click.native="whichone(scope.row.id)"
            >
              <img
                style="width: 150px; height: 150px"
                :src="scope.row.pic"
                class="avatar"
              />
            </el-upload>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="" label="颜色" width="180">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model="scope.row.color"
              placeholder="请输入内容"
            ></el-input
          ></template>
        </el-table-column> -->

        <el-table-column
          v-for="(item, index) in spData"
          :key="index"
          align="center"
          prop=""
          :label="item.key"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.spData[index].value"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="" label="库存">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model.number="scope.row.stock"
              placeholder="请输入内容"
            ></el-input
          ></template>
        </el-table-column>
        <el-table-column align="center" prop="" label="预警库存">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model.number="scope.row.lowStock"
              placeholder="请输入内容"
            ></el-input
          ></template>
        </el-table-column>
        <el-table-column align="center" prop="" label="锁定库存">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model.number="scope.row.lockStock"
              placeholder="请输入锁定库存"
            ></el-input
          ></template>
        </el-table-column>
        <el-table-column align="center" prop="" label="SKU编码">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model.number="scope.row.skuCode"
              placeholder="请输入内容"
            ></el-input
          ></template>
        </el-table-column>
        <el-table-column align="center" prop="" label="价格">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model.number="scope.row.price"
              placeholder="请输入价格"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="销量">
          <template slot-scope="scope">
            <el-input
              size="small"
              v-model.number="scope.row.sale"
              placeholder="请输入销量"
            ></el-input
          ></template>
        </el-table-column>
        <el-table-column align="center" prop="" label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.createTime"
              type="primary"
              @click="edit(scope.row)"
              >确认修改</el-button
            >
            <el-button
              v-if="scope.row.createTime"
              type="danger"
              @click="del(scope.row)"
              >删除</el-button
            >
            <el-button v-else type="primary" @click="saveSKu(scope.row)"
              >保存</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSku" style="float: left" type="primary"
          >新增SKU</el-button
        >
        <el-button type="primary" @click="save">确 定</el-button>
        <el-button @click="dialogFormVisible = !dialogFormVisible"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import goodsApi from "@/api/goods/goodsList/index";
import brandApi from "@/api/goods/brand/index";
import { getToken } from "@/utils/myAuth";
export default {
  components: {},

  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      id: "",
      color: "",
      size: "",
      choiceid: "",
      spData: "",
    };
  },

  created() {},

  mounted() {},

  methods: {
    // 保存SKU
    saveSKu(item) {
      console.log(item);
      item.id = this.id;
      item.spData = JSON.stringify(item.spData);
      this.spData = goodsApi.addProductSkus(item).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.init();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 新增SKU
    addSku() {
      var obj = {};
      for (var key in this.tableData[0]) {
        if (key == "spData") {
          console.log("object");
          obj.spData = this.tableData[0].spData;
        } else {
          obj[key] = "";
          // console.log('object');
        }
      }
      this.tableData.push(obj);
    },
    whichone(id) {
      console.log(id);
      this.choiceid = id;
    },
    //   图片上传
    handleAvatarSuccess(res) {
      console.log(res);
      var index = this.tableData.findIndex((el) => {
        return el.id == this.choiceid;
      });
      this.tableData[index].pic = res.data.fileUrl;
      console.log(index);
    },
    //   从父组件传过来的
    change(goodsId) {
      this.id = goodsId;
      this.dialogFormVisible = !this.dialogFormVisible;
      console.log(goodsId);
      goodsApi.getSkusByProductId(goodsId).then((res) => {
        console.log(res);
        res.data.items.forEach((el) => {
          // el.color = JSON.parse(el.spData)[0].value;
          el.spData = JSON.parse(el.spData);
          this.spData = el.spData;
          // el.size = JSON.parse(el.spData)[1].value;
        });
        this.tableData = res.data.items;
      });
    },
    init() {
      goodsApi.getSkusByProductId(this.id).then((res) => {
        console.log(res.data.items);
        res.data.items.forEach((el) => {
          el.spData = JSON.parse(el.spData);
        });
        this.tableData = res.data.items;
      });
    },
    // 点击保存按钮
    save() {
      this.dialogFormVisible = !this.dialogFormVisible;
      //   goodsApi.updateSkuInfo(this.tableData).then((res) => {
      //     console.log(res);
      //     if (res.success) {
      this.$message({
        message: "更新成功",
        type: "success",
      });
      //     }
      //   });
    },
    // 单行修改
    edit(item) {
      console.log(item);
      var arr = [];
      arr.push({
        key: "颜色",
        value: item.color,
      });
      arr.push({
        key: "大小",
        value: item.size,
      });
      item.spData = JSON.stringify(arr);
      goodsApi.updateSkuInfo(item).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message({
            message: "更新SKU成功",
            type: "success",
          });
        }else{
           this.$message.error(res.message);
        }
      });
    },
    del(item) {
      console.log(item);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        goodsApi.delSku(item.id).then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.init();
          }else{
             this.$message.error(res.message);
          }
        });
      });
    },
  },

  computed: {
    headers() {
      const token = getToken();
      return { token };
    },
  },

  watch: {},
};
</script>

<style scoped lang='scss'>
</style>